<template>

	<footer class="footer">
	
	</footer>
</template>

<script>
import SECURITY_LOGO from '@/assets/images/security.png'
import QRCODE_IMAGE from '@/assets/images/qrcode.png'
export default {
	name: "LayoutFooter",
	data(){
		return {
      		securityLogo: SECURITY_LOGO,
			qrcodeImage: QRCODE_IMAGE
    }
	},
	computed:{
		isMobile(){
			return this.mode == MOBILE;
		},
		mode(){
			return this.$store.state.showMode;
		},
		categories(){
			return this.$store.state.categories;
		}

	}
}
</script>

<style scoped lang="scss">
.footer{

	width: 100%;
	background: #14212A;
  	color: #FFFFFF;
  .footer-content{
    display: flex;
    justify-content: space-between;
    padding:3.2rem 15rem 1.45rem;
    border: 0.05rem solid rgba(255, 255, 255, 0.3);

    .module-header{
      height: 1.25rem;
      font-weight: 500;
      font-size: 0.9rem;
    }
    .link-list{
      margin-top: 0.65rem;

      font-weight: 500;
      font-size: 0.8rem;
      opacity: 0.5;

      .link-item{
        display: block;
        line-height: 1.1rem;
        margin-bottom: 0.5rem;
      }
    }


    .contact-module{
      max-width: 18.5rem;
      .contact-item{
        font-weight: 500;
        font-size: 0.8rem;
        line-height: 1.1rem;
        margin-bottom: 1.15rem;
	      display: flex;
	      label{
		      white-space: nowrap;
	      }

	      &.iconfont::before{
		      margin-right: 0.4rem;
	      }
      }
    }

    .qrcode{
      width: 7rem;
      height: 7rem;
    }

  }

  .security-info{
    height: 4.35rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    line-height: 1.05rem;

	  .copyright{
		  margin-right: 0.4rem;
	  }

	  .other{
		  display: flex;
		  justify-content: center;
		  align-items: center;
	  }
    .public-security{
      margin: 0 1rem;

    }
    .icon{
      height: 1.05rem;
    }
  }
}

/* 最大宽高比 7/8 或者 宽度小于768 */
@media (max-aspect-ratio: 7/8) , (max-width: 768px) {
	.footer{

		width: 100%;
		background: #14212A;
		color: #FFFFFF;
		.footer-content{
			display: block;
			padding:2rem 1.5rem;
			.module{
				margin-bottom: 2.45rem;
			}
			.module-header{
				height: 1.7rem;
				line-height: 1.7rem;
				font-weight: 500;
				font-size: 1.2rem;
			}
			.link-list{
				margin-top: 0.6rem;
				display: flex;

				.link-item{
					margin-right: 2rem;
					margin-bottom: 0.5rem;
				}
			}


			.contact-module{
				max-width: 100%;

				.contact-items{
					margin-top: 0.5rem;
					opacity: 0.5;


				}
			}

			.qrcode-module{
				width: 10rem;
				margin:4.5rem auto 0rem;
				text-align: center;
				line-height: 3.3rem;
				font-weight: 500;
				font-size: 1rem;


			}

			.qrcode{
				width: 10rem;
				height: 10rem;
				border-radius: 0.5rem;
			}

		}

		.security-info{
			height: 6rem;
			text-align: center;
			flex-direction: column;
			font-size: 0.9rem;
			line-height: 1.25rem;

			.public-security{
				margin: 0 1rem;

			}
			.icon{
				height: 1.05rem;
			}
		}
	}
}


</style>